{% block sw_modal %}
<transition
    name="sw-modal-fade"
    v-bind="$attrs"
    appear
>
    {% block sw_modal_element %}
    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
    <div
        class="sw-modal"
        :class="modalClasses"
        @mousedown="closeModalOnClickOutside"
        @keyup.esc="closeModalOnEscapeKey"
    >
        {% block sw_modal_dialog %}
        <div
            ref="dialog"
            class="sw-modal__dialog"
            :class="modalDialogClasses"
            :style="{ maxWidth: size }"
            role="dialog"
            aria-labelledby="modalTitleEl"
            tabindex="-1"
        >
            {% block sw_modal_header %}
            <header
                v-if="showHeader"
                class="sw-modal__header"
            >
                <slot name="modal-header">
                    {% block sw_modal_slot_header %}

                    <div class="sw-modal__titles">
                        <slot name="modal-title">
                            {% block sw_modal_close %}
                            <h4
                                id="modalTitleEl"
                                class="sw-modal__title"
                            >
                                {{ title }}
                            </h4>
                            {% endblock %}
                        </slot>

                        <h5
                            v-if="subtitle"
                            class="sw-modal__subtitle"
                        >
                            {{ subtitle }}
                        </h5>
                    </div>

                    {% block sw_modal_close_button %}
                    <button
                        v-if="closable"
                        class="sw-modal__close"
                        :title="$tc('global.sw-modal.labelClose')"
                        :aria-label="$tc('global.sw-modal.labelClose')"
                        @click.prevent="closeModal"
                    >
                        {% block sw_modal_close_icon %}
                        <mt-icon name="regular-times-s" />
                        {% endblock %}
                    </button>
                    {% endblock %}
                    {% endblock %}
                </slot>
            </header>
            {% endblock %}

            {% block sw_modal_body %}
            <slot name="body">
                <div
                    class="sw-modal__body"
                    :class="modalBodyClasses"
                >
                    {% block sw_modal_loader %}
                    <slot name="modal-loader">
                        <sw-loader v-if="isLoading" />
                    </slot>
                    {% endblock %}
                    <slot>
                        {% block sw_modal_slot_default %}{% endblock %}
                    </slot>
                </div>
            </slot>
            {% endblock %}

            {% block sw_modal_footer %}
            <footer
                v-if="showFooter && hasFooterSlot"
                class="sw-modal__footer"
            >
                <slot name="modal-footer">
                    {% block sw_modal_slot_footer %}{% endblock %}
                </slot>
            </footer>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% endblock %}
</transition>
{% endblock %}
